<div *ngIf="loading" style="text-align: center">
    <clr-spinner></clr-spinner>
</div>
<div class="clr-row" *ngIf="!loading">
    <div class="clr-col-12">
        <div class="card">
            <div class="card-header">
                {{'APP_OVERVIEW'|translate}}
            </div>
            <div class="card-block">
                <div class="clr-row" style="height: 260px">
                    <div class="clr-col-6" style="text-align: center">
                        <div class="clr-row">
                            <div class="clr-col-7" style="text-align: center;padding-top: 100px">
                                <span style="font-size: 144px">{{item.grade}}</span><br/><br/>
                                <span style="font-size: 24px">{{item.score | number:'2.0-1'}}</span>
                            </div>
                            <div class="clr-col-5" style="height: 100px">
                                <div echarts
                                     [autoResize]="true"
                                     [options]="pieChartOptions"
                                     class="demo-chart"
                                     style="width: 70%; height: 240px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="clr-col-6" style="border-left:1px solid #AAAAAA;text-align: center">
                        <div class="clr-row">
                            <div class="clr-col-2">

                            </div>
                            <div class="clr-col-10">
                                <div echarts
                                     [autoResize]="true"
                                     [options]="barChartOptions"
                                     class="demo-chart"
                                     style="width: 70%; height: 240px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clr-row" *ngIf="!loading">
    <div class="clr-col-12" *ngFor="let ns of item.results">
        <div class="card">
            <div class="card-header">
                <div style="display: block;padding-bottom: 12px">
                    <div style="float: left">{{ns.namespace}}</div>
                </div>
            </div>
            <div class="card-block">
                <div class="clr-row">
                    <div class="clr-col-12">
                        <clr-stack-view>
                            <clr-stack-block *ngFor="let re of ns.results">
                                <clr-stack-label>{{re.kind}}:{{re.name}}</clr-stack-label>
                                <clr-stack-block>
                                    <clr-stack-label>Pod Sec</clr-stack-label>
                                    <clr-stack-content>
                                        <ul class="list-unstyled">
                                            <li *ngFor="let pr of re.podResults">
                                                <clr-icon *ngIf="pr.severity==='danger'" shape="exclamation-circle"
                                                          style="color: #F57660"></clr-icon>
                                                <clr-icon *ngIf="pr.severity==='warning'" shape="info-circle"
                                                          style="color: #F8B96A"></clr-icon>
                                                <clr-icon *ngIf="pr.severity==='success'" shape="check-circle"
                                                          style="color: #90D072"></clr-icon>
                                                <span>{{pr.message}}</span>
                                            </li>
                                        </ul>
                                    </clr-stack-content>
                                </clr-stack-block>
                            </clr-stack-block>
                        </clr-stack-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>